<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <p v-if="this.sj >= 0 && sj <= 5">
          已经凌晨了，您该休息了，{{ t_name }}老师！当前系统时间为:{{
            nowdatetime
          }}
        </p>
        <p v-else-if="this.sj >= 6 && sj <= 8">
          早上好，{{ t_name }}老师！当前系统时间为:{{ nowdatetime }}
        </p>
        <p v-else-if="this.sj >= 9 && sj <= 11">
          上午好，{{ t_name }}老师！当前系统时间为:{{ nowdatetime }}
        </p>
        <p v-else-if="this.sj >= 12 && sj <= 13">
          中午好，{{ t_name }}老师！当前系统时间为:{{ nowdatetime }}
        </p>
        <p v-else-if="this.sj >= 14 && sj <= 18">
          下午好，{{ t_name }}老师！当前系统时间为:{{ nowdatetime }}
        </p>
        <p v-else-if="this.sj >= 19 && sj <= 23">
          晚上好，{{ t_name }}老师！当前系统时间为:{{ nowdatetime }}
        </p>
      </el-header>
      <el-container>
        <el-aside width="200px"
          >
          <el-button style="background-color: #d3dce6" @click="chaxunkecheng"
            >查询课程信息</el-button
          >
          <el-button style="background-color: #d3dce6" @click="xueshengxinxi"
            >操作本班学生信息</el-button
          >
          <el-button style="background-color: #d3dce6" @click="luruxuesheng"
            >录入学生基本信息</el-button
          >
          <el-button style="background-color: #d3dce6" @click="benbanchengji"
            >操作本班学生成绩</el-button
          >
          <el-button style="background-color: #d3dce6" @click="kechengchengji"
            >所授课程学生成绩</el-button
          >
          <el-button style="background-color: #d3dce6" @click="benbantongji"
            >本班平均分柱状图</el-button
          >
          <el-button style="background-color: #d3dce6" @click="kechengtongji"
            >学生签到统计图</el-button
          >
          <el-button style="background-color: #d3dce6" @click="rili"
            >查看日历</el-button
          >
          <el-button style="background-color: #d3dce6" @click="tuichu"
            >返回登录</el-button
          >
        </el-aside>

        <el-main> <router-view /></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
const axios = require("axios");
export default {
  name: "Teacher",
  data() {
    return {
      t_name: "",
      nowdatetime: "",
      t_bianhao: "",
      sj: new Date().getHours(),
      value: new Date(),
    };
  },
  methods: {
    chaxunkecheng() {
      this.$router.push({ path: "/teacher/teacher_chaxunkecheng" });
    },
    kechengchengji() {
      this.$router.push({ path: "/teacher/teacher_kechengchengji" });
    },
    benbanchengji() {
      this.$router.push({ path: "/teacher/teacher_benbanchengji" });
    },
    kechengtongji() {
      this.$router.push({ path: "/teacher/teacher_kechengtongjitu" });
    },
    benbantongji() {
      this.$router.push({ path: "/teacher/teacher_banjitongji" });
    },
    luruxuesheng() {
      this.$router.push({ path: "/teacher/teacher_luruxuesheng" });
    },
    xueshengxinxi() {
      this.$router.push({ path: "/teacher/teacher_xueshengxinxi" });
    },
    tuichu() {
      this.$router.push({ name: "Home" });
    },
    rili() {
      this.$router.push({ path: "/teacher/trili" });
    },
    chaxun() {
      let _this = this;
      if (_this.t_bianhao == "") {
        _this.$router.push({ path: "/" });
      } else {
        axios
          .get("https://localhost:44391/api/zhuce/chaxunbianhao", {
            params: {
              t_bianhao: this.t_bianhao,
            },
          })
          .then(function (response) {
            console.log(response.data);
            _this.t_name = response.data.t_name;
          });
      }
    },
    setIntervalDatetime() {
      setInterval(this.formatDatetime, 1000);
    },
    formatDatetime() {
      let datetime = new Date();
      let year = datetime.getFullYear();
      let month = datetime.getMonth() + 1;
      let date = datetime.getDate();
      let hour = datetime.getHours();
      let minute = datetime.getMinutes();
      let second = datetime.getSeconds();
      this.nowdatetime =
        year +
        "年" +
        this.formatNum(month) +
        "月" +
        this.formatNum(date) +
        "日" +
        this.formatNum(hour) +
        "时" +
        this.formatNum(minute) +
        "分" +
        this.formatNum(second) +
        "秒";
    },
    formatNum(num) {
      return num < 10 ? "0" + num : num;
    },
  },
  mounted() {
    this.t_bianhao = this.$store.state.t_bianhao;
    this.setIntervalDatetime();
    this.chaxun();
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
  height: 685px;
}

.el-main {
  /* background-color: #e9eef3; */
  color: var(--el-text-color-primary);
  text-align: center;
  /* line-height: 160px; */
  position: absolute;
  left: 200px;
  right: 0;
  top: 60px;
  bottom: 0;
  overflow-y: scroll;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
p {
  font-size: 26px;
  margin: 0px;
}
.el-button {
  width: 180px;
  height: 50px;
  margin-left: 10px;
  margin-top: 19.2px;
  font-size: 18px;
}
.el-calendar {
  /* background-color: aqua; */
  /* width: 900px;*/
  height: 629px;
  --el-calendar-cell-width: 83px;
}
</style>